<template>
    <div class="column column--full">
        <header class="header header--text">
            <h2 class="title">
                <span class="label">Partner Center</span>
            </h2>
        </header>
        <div class="adver" style="height:30px;width:100%"></div>
        <div class="watch">
            <header class="header header--text">
                <h2 class="title">
                    <span class="label">Your Watchlists</span>
                </h2>
            </header>
            <div class="form__item">
                <el-icon class="drow">
                    <CaretBottom />
                </el-icon>
                <select class="dropdown dropdown--form j-dropdown">
                    <option value="0">New watchlist</option>
                </select>
                <router-link to="/watchList" class="btn">+ Add to
                    Watchlist</router-link>
            </div>
            <table class="table j-table" style="margin-top:40px;">
                <thead>
                    <tr class="table__row">
                        <th class="table__heading indicator"></th>
                        <th class="table__heading w50 align--left">
                            <div class="primary">Symbol</div>
                            <small class="secondary">Company</small>
                        </th>
                        <th class="table__heading w45">
                            <div class="primary">Price</div>
                            <small class="secondary">Chg/Chg %</small>
                        </th>
                    </tr>
                </thead>
                <tbody class="j-watchlist-list">
                    <tr class="table__row j-item" v-for="item in watchList" :key="item.uuid" @click="toPush(item)">
                        <td :class="[item.change_ratio < 0 ? 'negative' : 'positive', 'table__cell']">
                            <div class="marker"></div>
                        </td>
                        <td class="table__cell align--left">
                            <a class="primary t-link j-watchlist-tracking">
                                <span class="symbol t-symbol">{{ item.symbol }}</span>
                            </a>
                            <div class="secondary">
                                <small class="t-company">{{ item.company_name }}</small>
                            </div>
                        </td>
                        <td class="table__cell">
                            <div class="primary t-last ignore-color"><bg-quote>{{ item.close }}</bg-quote></div>
                            <small class="secondary">
                                <span class="point t-change"><bg-quote class="negative">{{
                                    item.change_money }}</bg-quote></span><span class="percent t-percent">
                                    <bg-quote :class="[item.change_ratio < 0 ? 'negative' : 'positive']">{{
                                        item.change_ratio
                                    }}%</bg-quote></span>
                            </small>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="table__details j-info">
                <span class="details__info"><span class="details__text j-count">Showing 3 of 3 Items</span>
                    (<router-link to="/watchList" class="link">Go to Your Watchlist</router-link>) </span>
            </div>
            <div class="last" style="margin-top:20px;">
                <header class="header header--text">
                    <h2 class="title">
                        <span class="label">Recently Viewed Tickers</span>
                    </h2>
                </header>
                <div style="display:flex;flex-wrap: wrap;">
                    <div class="ticker" v-for="item in watchViewList" :key="item.uuid" @click="toPush(item)">
                        <bg-quote class='posNegNeu'>
                            <h4 class="t-symbol">{{ item.symbol }}</h4>
                            <span class="ticker__price ignore-color t-price"><bg-quote>{{ item.close
                                    }}</bg-quote></span>
                            <div class="ticker__change ignore-color">
                                <span class="change__price ignore-color t-change"><bg-quote>{{ item.change_money
                                        }}</bg-quote></span>
                                <span class="change__percent ignore-color t-percent">
                                    <bg-quote>{{ item.change_ratio }}%</bg-quote></span>

                                <i class="icon" :class="[item.change_ratio < 0 ? 'negative' : 'positive']"></i>
                            </div>
                        </bg-quote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import homeRequest from "@/api/home.js";
import { getStorage } from "@/utils";
import { useRouter } from 'vue-router'
const router = useRouter()
const token = ref('')
token.value = getStorage("spToken");
onMounted(() => {
    if (token.value) {
        getList()
        getviewList()
    }
})
const toPush = (item) => {
    router.push({ name: 'stockDetail', params: { symbol: item.symbol } })
}
const watchList = ref([])
const getList = () => {
    let data = {
        current: 1,
        size: 10,
    }
    homeRequest.userWatchlist(data)
        .then((res) => {
            if (res.code === 0) {
                watchList.value = res.data.records
            }
        })
}
const watchViewList = ref([])
const getviewList = () => {
    let data = {
        current: 1,
        size: 10,
    }
    homeRequest.viewTicketList(data)
        .then((res) => {
            if (res.code === 0) {
                watchViewList.value = res.data.records
            }
        })
}
defineExpose({
    getList,
    getviewList
});
</script>
<style scoped lang='scss'>
.watch {
    width: 100%;

    .form__item {
        width: 100%;
        position: relative;

        .dropdown--form {
            border-radius: 0;
            box-shadow: inset 0 0 0 1px #c3c3c3;
            font-size: 13px;
            padding: 10px 30px 10px 10px;
            height: 36px;
        }

        .drow {
            position: absolute;
            right: 10px;
            bottom: 11px;
            z-index: 99;
            color: #6a6a6a;
            font-size: 1rem
        }

        .btn {
            font-size: 0.75rem;
            margin-top: 5px;
            float: right;
            padding-right: 0
        }
    }
}

.j-item {
    cursor: pointer;
}

.ticker {
    width: 50%;
    padding: 0 1px 1px 0;
    text-decoration: none;
    cursor: pointer;

    .posNegNeu {
        display: block;
        width: 100%;
        padding: 10px;
        max-height: 82px;
        background: #202020;
        color: #fff;
        line-height: 1;
        transition: all .4s ease-in-out;

        .t-price {
            margin-bottom: 8px;
            display: inline-block
        }

        .t-change {
            margin-right: 8px;
        }

        .t-change,
        .t-percent {
            color: #c3c3c3;
        }

        .ticker__change {
            display: flex;
        }

        .t-symbol {
            padding-bottom: 10px;
            position: relative;
        }

        .t-symbol:before {
            content: "";
            position: absolute;
            bottom: 6px;
            left: 0;
            width: 10px;
            border-top: 1px solid #666;
        }
    }
}

.align--left,
.t-last {
    font-weight: bold;
}

.secondary {
    font-size: 0.75rem;
    line-height: 1.25;
    color: #6a6a6a;

    .t-company {
        font-size: 0.75rem;
        font-weight: normal;
    }
}

.ticker .icon:before {
    top: calc(50% + 4px);
}
</style>